<template>
  <div id="app" class="skCard">
    <template>
      <a-row :gutter="[8,32]" v-if="dashShow">
        <a-col>
          <a-card :bordered="false" class="ptb10">
            <div class="ant-card-head-wrapper">
              <div class="ant-card-head-title">
                <a-row type="flex" :gutter="[4,8]">
                  <a-col :sm="4" :xxl="2" v-for="(item, index) in dataList" :key="item.title">
                    <img class="take-notes-img" :src="item.img" alt="" />
                    <span>{{ item.title }}</span>
                    <span class="take-notes-data">{{ item.val }}</span>
                    <span v-show="index != dataList.length - 1">人</span>
                    <span v-show="index == dataList.length - 1">%</span>
                  </a-col>
                </a-row>
              </div>
              <!-- <div class="ant-card-extra">
                <a slot="extra" @click="handleActualInfo">查看详情<a-icon type="caret-right" /></a>
              </div>             -->
            </div>
          </a-card>
        </a-col>
      </a-row>
      <dash-page ref="dashPage"  @cardData="cardDataSet" v-if="dashShow"></dash-page>
    </template>
    <sk-actual-detail ref="skActualDetail" @cardData="cardDataSet" :classId="classId" :dateType="dateType" v-if="actualShow"></sk-actual-detail>
    <sk-late-detail ref="skLateDetail" @cardData="cardDataSet" :classId="classId" :dateType="dateType" v-if="lateShow"></sk-late-detail>
    <sk-all-detail ref="skAllDetail" @cardData="cardDataSet" :classId="classId" :dateType="dateType" v-if="allShow"></sk-all-detail>
  </div>
</template>
<script>
import "@/assets/less/ClassAndCard.less"
import { getAction } from '@/api/manage'
import dashPage from './skDashPage'
import skActualDetail from './modules/skActualDetail'
import skLateDetail from './modules/skLateDetail'
import skAllDetail from './modules/skAllDetail'
import u105 from '@/assets/analysis-img/u105.png'
import u106 from '@/assets/analysis-img/u106.png'
import u107 from '@/assets/analysis-img/u107.png'
import u108 from '@/assets/analysis-img/u108.png'
import u94 from '@/assets/analysis-img/u94.png'
export default {
  name: 'skCard',
  components: {
    dashPage,
    skActualDetail,
    skLateDetail,
    skAllDetail
  },
  data() {
    return {
      url: {
        list: 'management/skStudentCheck/getStudentCheckStatistical'
      },
      classId: '',
      dashShow: true,
      actualShow: false,
      lateShow: false,
      allShow: false,
      dateType: 'week',
      dataList: [
        { img: u94, title: '应到', key: 'shouldArrive', val: '' },
        { img: u105, title: '实到', key: 'actualArrival', val: '' },
        { img: u106, title: '请假', key: 'absence', val: '' },
        { img: u107, title: '迟到', key: 'late', val: '' },
        { img: u108, title: '出勤率', key: 'rate',val: '' }
      ],
    }
  },

  filters: {},

  computed: {},

  created() {
  },

  activated() {},

  mounted() {
    this.load()
  },
  methods: {
    //初始化加载数据
    load() {
      // 查询全园当日数据
      const paramsClassWeek = {
        statisticalScope: 'all',
        timeScope: 'today'
      }
      getAction(this.url.list, paramsClassWeek).then(res => {
        if (res.success) {
          if (res.result.length > 0) {
            this.dataList.forEach(item => {
              item.val = res.result[0][item.key];
              if(item.key == 'rate') {
                item.val = (item.val * 100).toFixed(2)
              }
            })
          }
        }
      })
    },
    cardDataSet(data, dateType) {
      console.log(data);
      this.dashShow = data.show;
      this.classId = data.classId;
      if (data.show) {
        this.actualShow = false;
        this.lateShow = false;
        this.allShow = false;
      } else if (data.actualShow) {
        this.dashShow = false;
        this.lateShow = false;
        this.actualShow = true;
        this.allShow = false;
        this.dateType = dateType;
      } else if (data.lateShow) {
        this.dashShow = false;
        this.lateShow = true;
        this.actualShow = false;
        this.allShow = false;
        this.dateType = dateType;
      } else if (data.allShow) {
        this.dashShow = false;
        this.lateShow = false;
        this.actualShow = false;
        this.allShow = true;
        this.dateType = dateType;
      }
    },
  }
}
</script>
<style scoped lang="less">
/* @import url(); 引入css类 */
@import '~@assets/less/skReport.less';
// /deep/ .ant-table-wrapper{
//   height: 403px;
// }

.ant-card-head-title .title {
      margin-bottom: 14px;
      font-size: 20px;
      padding-right: 10px;
    }
</style>
